<style scoped>
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-panel {
    background: #eee;
  }
  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }
  .weui-panel {
    margin-top: 0;
    text-align: left;
  }
  .attachimg {
    /*width: 100%;*/
  }
  .tit label, .tit span {
    font-size: 16px;
  }
  .tit label {
    padding-right: 20px;
  }
  .weui-panel.weui-panel_access {
    padding-bottom: 10px;
  }
  .weui-panel__bd:not(.base) {
    width: 98%;
    padding: 0 1% 2px 1%;
  }
  .rj-cont-tit:not(.base) {
    border-radius: 5px;
  }
</style>
<template>
  <div class="viewpick">
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      领料单详情
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__bd base">
        <div class="weui-form-preview billitem rj-cont-tit base">
          <div class="rj-cell max">
            <label>编号：</label>
            <span>{{picking.code}}</span>
          </div>
          <div class="rj-cell max">
            <label>生产计划编号：</label>
            <span>{{picking.produceplanCode}}</span>
          </div>
          <div class="rj-cell max">
            <label>所在班组：</label>
            <span>{{picking.departmentname}}</span>
          </div>
          <div class="rj-cell max">
            <label>领料类别：</label>
            <span>{{picktypename(picking.picktype)}}</span>
          </div>
          <div class="rj-cell max">
            <label>出库库房：</label>
            <span>{{picking.strname}}</span>
          </div>
          <div class="rj-cell max">
            <label>库存组织：</label>
            <span>{{picking.orgname}}</span>
          </div>
          <div class="rj-cell max">
            <label>状态：</label>
            <span>{{picking.statusname}}</span>
          </div>
          <div class="rj-cell max">
            <label>创建日期：</label>
            <span>{{picking.createtime}}</span>
          </div>
          <div class="rj-cell max">
            <label>提交人：</label>
            <span>{{picking.operatorName}}</span>
          </div>
        </div>
      </div>
      <div class="weui-panel__hd" v-if="outweight > 0">生产数据统计</div>
      <div class="weui-panel__bd" style="background: #fff;" v-if="outweight > 0">
        <CommonChart :whinformweight="whinformweight" :failedweight="failedweight" :materweight="materweight" :scrapweight="scrapweight" :outweight="outweight" :lossweight="lossWeight"></CommonChart>
      </div>
      <div class="weui-panel__hd" v-if="outweight > 0">出库信息</div>
      <div class="weui-panel__bd" v-for="(item, index) in outforms" :key="item.guid">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell max  tit">
            <label>总重量</label>
            <span>{{outweight}} 吨</span>
          </div>
          <div class="rj-cell max" v-for="(product, index) in item.items" :key="product.guid">
            <label><span v-if="index == 0" style="font-size: 14px;padding: 0;">产品：</span></label>
            <span>{{product.product}}</span>
            <span>{{product.weight}} {{product.stockunit}}</span>
            <template v-if="product.cosobj">
              <label><span>成本对象：</span></label>
              <span>{{product.cosobj.productName}} {{product.cosobj.name}}</span>
            </template>
          </div>
          <div class="rj-cell max">
            <label>操作人员：</label>
            <span>{{item.operator}}</span>
            <span>{{item.createtime}}</span>
          </div>
          <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="item.imgs.length > 0">
            <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">出库单 </p>
            <div class="exp uploaderFiles" style="display: inline-block;">
              <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in item.imgs" :key="image.guid"  alt="" onerror="javascript:this.src='../../../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
            </div>
          </div>
        </div>
      </div>


      <div class="weui-panel__hd" ref="qaformTitle"    v-show="qaform.status ==1 || qaform.status ==2">质检单
      </div>
      <div class="weui-panel__bd"   v-show="qaform.status ==1 || qaform.status ==2" ref="qaform">
        <div class="weui-form-preview billitem rj-cont-tit">

          <div    style="border-top: 1px solid #eee;">
            <div  >
              <div class="rj-cell max">
                <label><span style="font-size: 14px;padding: 0;">质检单编号：</span></label>
                <span>{{qaform.qacode}}</span>

              </div>
            </div>
            <div class="rj-cell max">
              <label>抽检数量：</label>
              <span>{{qaform.chkpknum}} 包</span>
              <span> {{qaform.chkwght}} Kg</span>

              <label>合格重量：</label>
              <span> {{qaform.okweight}} Kg</span>
            </div>
            <div class="rj-cell max">
              <label>不合格重量：</label>
              <span> {{qaform.notokweight}} Kg</span>
              <label>不合格率：</label>
              <span> {{qaform.unqualifiedchkrate}}%</span>
            </div>
            <div class="rj-cell max">
              <label>土杂重量：</label>
              <span> {{qaform.soilchkweight}} Kg</span>
              <label>土杂率：</label>
              <span> {{qaform.soilchkrate}}%</span>
            </div>

            <br>
            <div class="rj-cell max">
              <label>合格率：</label>
              <span> {{ Number(100 - qaform.deductrate).toFixed(2)}}  %</span>
            </div>

            <div class="rj-cell max">
              <label>质检人：</label>
              <span>{{qaform.operatorname}}</span>
              <label>质检时间：</label>
              <span>{{qaform.createdate}}</span>
            </div>
            <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="qaFormImg != undefined && qaFormImg.length > 0">
              <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">质检单照片</p>
              <div class="exp uploaderFiles" style="display: inline-block;">
                <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in qaFormImg" :key="image.guid"  alt="" onerror="javascript:this.src='../../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="weui-panel__hd" v-if="whinformweight > 0 || failedweight > 0 || failedweight > 0 || materweight > 0">入库信息</div>
      <div class="weui-panel__bd" v-if="whinformweight > 0">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell max tit">
            <label>产成品库</label>
<!--            <span>{{whinformweight}} 吨</span>-->
          </div>
          <div  v-for="(item, index) in whinforms" :key="item.guid" style="border-top: 1px solid #eee;">
            <div class="rj-cell max " v-show="item.qaformRsult !=''">
              <label>质检结果：</label>
              <span> {{item.qaformRsult == 1 ? '合格' : '不合格'}}</span>
            </div>


            <div  v-for="(product, index) in item.items" :key="product.guid">
              <div class="rj-cell max">
                <label><span style="font-size: 14px;padding: 0;">产品：</span></label>
                <span>{{product.product}}</span>
                <span>{{product.spename}}</span>
              </div>
              <div class="rj-cell max">
                <label>数量：</label>
                <span>{{product.weight}} {{product.stockunit}}</span>
                <span>{{product.house}}</span>
              </div>
            </div>
            <div class="rj-cell max">
              <label>操作人员：</label>
              <span>{{item.operator}}</span>
              <span>{{item.createdate}}</span>
            </div>
            <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="item.images != undefined && item.images.length > 0">
              <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">入库单</p>
              <div class="exp uploaderFiles" style="display: inline-block;">
                <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in item.images" :key="image.guid"  alt="" onerror="javascript:this.src='../../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="weui-panel__bd" v-if="failedweight > 0">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell max tit">
            <label>次品库</label>
<!--            <span>{{failedweight}}  吨</span>-->
          </div>
          <div  v-for="(item, index) in failedwhs" :key="item.guid" style="border-top: 1px solid #eee;">
            <div class="rj-cell max " v-show="item.qaformRsult !=''">
              <label>质检结果：</label>
              <span> {{item.qaformRsult == 1 ? '合格' : '不合格'}}</span>
            </div>
            <div  v-for="(product, index) in item.items" :key="product.guid">
              <div class="rj-cell max">
                <label><span style="font-size: 14px;padding: 0;">产品：</span></label>
                <span>{{product.product}}</span>
                <span>{{product.spename}}</span>
              </div>
              <div class="rj-cell max">
                <label>数量：</label>
                <span>{{product.weight}} {{product.stockunit}}</span>
                <span>{{product.house}}</span>
              </div>
            </div>
            <div class="rj-cell max">
              <label>操作人员：</label>
              <span>{{item.operator}}</span>
              <span>{{item.createdate}}</span>
            </div>
            <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="item.images != undefined && item.images.length > 0">
              <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">入库单</p>
              <div class="exp uploaderFiles" style="display: inline-block;">
                <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in item.images" :key="image.guid"  alt="" onerror="javascript:this.src='../../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="weui-panel__bd" v-if="materweight > 0">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell max tit">
            <label>退料</label>
<!--            <span>{{materweight}}  吨</span>-->
          </div>
          <div  v-for="(item, index) in maters" :key="item.guid" style="border-top: 1px solid #eee;">
            <div  v-for="(product, index) in item.matretapplyitems" :key="product.guid">
              <div class="rj-cell max">
                <label><span style="font-size: 14px;padding: 0;">产品：</span></label>
                <span>{{product.productName}}</span>
                <span>{{product.specName}}</span>
              </div>
              <div class="rj-cell max">
                <label>数量：</label>
                <span>{{product.weight}} {{product.stockunit}}</span>
                <span>{{product.house}}</span>
              </div>
            </div>
            <div class="rj-cell max">
              <label>操作人员：</label>
              <span>{{item.operatorName}}</span>
              <span>{{item.createdate}}</span>
            </div>
            <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="item.images != undefined && item.images.length > 0">
              <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">退料单</p>
              <div class="exp uploaderFiles" style="display: inline-block;">
                <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in item.images" :key="image.guid"  alt="" onerror="javascript:this.src='../../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
              </div>
            </div>
          </div>
        </div>
      </div>



      <div class="weui-panel__hd" v-if="scrapweight > 0">报废信息</div>
      <div class="weui-panel__bd" v-if="scrapweight > 0" id="scrap">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell max  tit">
            <label>报废</label>
<!--            <span>{{scrapweight}}  吨</span>-->
          </div>
          <div  v-for="(item, index) in scraps" :key="item.guid" style="border-top: 1px solid #eee;" :ref="item.guid">
            <div  v-for="(product, index) in item.items" :key="product.guid">
              <div class="rj-cell max">
                <label><span style="font-size: 14px;padding: 0;">产品：</span></label>
                <span>{{product.product}}</span>
                <span>{{product.spename}}</span>
              </div>
              <div class="rj-cell max">
                <label>数量：</label>
                <span>{{product.weight}} {{product.stockunit}}</span>
              </div>
            </div>
            <div class="rj-cell max">
              <label>操作人员：</label>
              <span>{{item.operator}}</span>
              <span>{{item.createdate}}</span>
            </div>
            <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="item.images != undefined && item.images.length > 0">
              <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">报废单</p>
              <div class="exp uploaderFiles" style="display: inline-block;">
                <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in item.images" :key="image.guid"  alt="" onerror="javascript:this.src='../../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
              </div>
            </div>
            <div class="weui-form-preview__ft">
              <a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:" v-show="picking.status <= 3 && item.operatorid == userid" @click="delScrap(item.guid)">删除</a>
            </div>
          </div>
        </div>
      </div>
      <OperationLogs2 :orderid="id" :srguid="picking.strmid" :departid="picking.departmentid"></OperationLogs2>
    </div>
  </div>
</template>

<script>
  import CommonChart from "../CommonChart";
  import OperationLogs2 from '../../common/OperationLogs2'

  export default {
    name: 'ViewPickingList',
    components: {CommonChart, OperationLogs2},
    data () {
      return {
        openid: localStorage.openid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
        userid: localStorage.userid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
        id: '',
        picking: {},
        scraps: [],
        scrapweight: 0,
        whinforms: '',
        whinformweight: 0,
        failedwhs: [],
        failedweight: 0,
        maters: [],
        materweight: 0,
        outforms: [],
        outweight: 0,
        lossWeight: 0,
        qaform:{},
        qaFormImg:[]

      }
    },
    created() {
      window.addEventListener('setItem', ()=> {
        this.openid = localStorage.getItem('openid');
        this.userid = localStorage.getItem('userid');
      })
    },
    mounted () {

      this.id = this.$route.query.id;
      this.getPickinglist(this.id);

      //图片浏览器
      $('.weui-panel').on('click', '.uploaderFiles .attachimg', function () {
        var num = $(this).parent().children().not( ".exp" ).length;
        var imgArr = [];
        for (var i=0; i<num; i++) {
          imgArr.push($(this).parent().find('.attachimg').eq(i).data('img'));
        }
        var pnum = $(this).parent().find('.exp').length;
        var index = pnum > 0 ? $(this).index() - pnum : $(this).index();
        var pb = $.photoBrowser({
          items: imgArr,
          initIndex: index
        });
        pb.open();
      });

    },
    methods: {
      picktypename: function(type) {
        let name = '';
        switch (type) {
          case 1:
            name = "原材料领料";
            break;
          case 2:
            name = "产成品领料";
            break;
          case 3:
            name = "次品领料";
            break;
        }
        return name;
      },
      getPickinglist: function (id) {
        this.axios({
          method: 'get',
          url: '/produce/Pickinglist!detail.action',
          params: {pickinglistid: id}
        }).then(response => {
          if (response.data.msg == 'success') {
            let data = response.data;
            this.picking = data.picking;
            this.scraps = data.scraps;
            this.scrapweight = this.toFix6(data.scrapweight != undefined ? data.scrapweight : 0);
            this.whinforms = data.whinforms;
            this.whinformweight = this.toFix6(data.whinformweight != undefined ? data.whinformweight : 0);
            this.failedwhs = data.failedwhs;
            this.failedweight = this.toFix6(data.failedweight != undefined ? data.failedweight : 0);
            this.maters = data.maters;
            this.materweight = this.toFix6(data.materweight != undefined ? data.materweight : 0);
            this.outforms = data.outforms;
            this.outweight = this.toFix6(data.outweight != undefined ? data.outweight : 0);
            this.lossWeight = this.toFix6(this.outweight - this.whinformweight - this.failedweight - this.scrapweight - this.materweight);
            this.qaform = data.qaForm  != null ? data.qaForm : 0;
            this.qaFormImg = data.qaFormImg != null ?data.qaFormImg :0;

          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError('系统错误');
          }
        });
      },
      delScrap: function (guid) {
        let that = this;
        var object = Object;
        $.confirm("确定删除!", function() {
          that.axios({
            method: 'post',
            url: '/produce/Scrapapply!delete.action',
            params: {scrapapplyid: guid}
          }).then((response) => {
            if (response.data.msg == 'success') {
              if (object.keys(that.$refs).length == 1) {
                $('#scrap').remove();
              }
              that.$refs[guid][0].remove();
              that.toastSuccess('删除成功！');
            } else if (response.data.msg == 'canotdel') {
              that.toastText('无权删除！');
            } else if (response.data.msg == 'outlogin') {
              that.toastText('请重新登录！');
            } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
              //不不设置提示
            } else {
              that.toastError("系统错误");
            }
          })
        }, function() {
          //点击取消后的回调函数
        });
      },
    }
  }
</script>
